import Image from 'next/image';
import Link from 'next/link';

export default function Home() {
  return (
    <div className="space-y-12">
      {/* 英雄横幅 */}
      <div className="relative w-full h-64 md:h-96 bg-gradient-to-r from-blue-900 to-purple-900 rounded-lg overflow-hidden">
        <div className="absolute inset-0 flex items-center justify-center">
          <h1 className="text-4xl md:text-6xl font-bold text-white text-center z-10">
            王者荣耀数据分析站
          </h1>
        </div>
        <div className="absolute inset-0 opacity-20 bg-[url('/hero-banner.jpg')] bg-cover bg-center"></div>
      </div>

      {/* 功能区块 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Link href="/heroes" className="block">
          <div className="bg-white shadow-lg rounded-lg p-6 hover:shadow-xl transition-shadow">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">英雄资料库</h2>
            <p className="text-gray-600">
              查看所有英雄的详细信息，包括技能、属性、背景故事和皮肤展示。
            </p>
          </div>
        </Link>

        <Link href="/items" className="block">
          <div className="bg-white shadow-lg rounded-lg p-6 hover:shadow-xl transition-shadow">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">装备信息库</h2>
            <p className="text-gray-600">
              浏览游戏中的所有装备，了解其属性、效果和合成路径。
            </p>
          </div>
        </Link>

        <Link href="/guides" className="block">
          <div className="bg-white shadow-lg rounded-lg p-6 hover:shadow-xl transition-shadow">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">攻略中心</h2>
            <p className="text-gray-600">
              获取阵容搭配建议、热门出装推荐和基础打法思路。
            </p>
          </div>
        </Link>
      </div>

      {/* 网站介绍 */}
      <div className="bg-white shadow-lg rounded-lg p-8">
        <h2 className="text-2xl font-bold text-gray-800 mb-4">关于本站</h2>
        <p className="text-gray-600 mb-4">
          王者荣耀数据分析站致力于为玩家提供全面的游戏资料和分析工具，帮助您更好地了解游戏机制，提升游戏体验。
        </p>
        <p className="text-gray-600">
          本站提供的数据和分析仅供参考，实际游戏体验可能因版本更新、玩家水平和游戏环境等因素而有所不同。
        </p>
      </div>
    </div>
  );
}
